<template>
  <div class="pet-shop">
    <h2>宠物商店</h2>
    <div class="pet-types">
      <div 
        v-for="pet in petTypes" 
        :key="pet.id"
        class="pet-type-card"
        @click="selectPetType(pet)"
      >
        <div class="pet-icon">{{ pet.icon }}</div>
        <div class="pet-info">
          <h3>{{ pet.name }}</h3>
          <p>{{ pet.description }}</p>
          <div class="pet-stats">
            <div class="stat">
              <span>生命值</span>
              <div class="stat-bar">
                <div 
                  class="stat-fill"
                  :style="{ width: pet.baseStats.health + '%' }"
                ></div>
              </div>
            </div>
            <div class="stat">
              <span>饥饿度</span>
              <div class="stat-bar">
                <div 
                  class="stat-fill"
                  :style="{ width: pet.baseStats.hunger + '%' }"
                ></div>
              </div>
            </div>
            <div class="stat">
              <span>快乐度</span>
              <div class="stat-bar">
                <div 
                  class="stat-fill"
                  :style="{ width: pet.baseStats.happiness + '%' }"
                ></div>
              </div>
            </div>
          </div>
          <div class="pet-skills">
            <div 
              class="skill"
              :class="{ 'skill-bonus': pet.skillAptitude.harvest > 1 }"
            >
              🌾 收获 x{{ pet.skillAptitude.harvest }}
            </div>
            <div 
              class="skill"
              :class="{ 'skill-bonus': pet.skillAptitude.guard > 1 }"
            >
              🛡️ 守卫 x{{ pet.skillAptitude.guard }}
            </div>
            <div 
              class="skill"
              :class="{ 'skill-bonus': pet.skillAptitude.water > 1 }"
            >
              💧 浇水 x{{ pet.skillAptitude.water }}
            </div>
          </div>
          <div class="pet-price">
            💰 {{ pet.price }}
          </div>
        </div>
      </div>
    </div>

    <!-- 领养对话框 -->
    <div v-if="showAdoptDialog" class="adopt-dialog">
      <div class="dialog-content">
        <h3>领养 {{ selectedPet?.name }}</h3>
        <div class="pet-preview">
          <span class="pet-icon">{{ selectedPet?.icon }}</span>
        </div>
        <div class="input-group">
          <label>给宠物起个名字：</label>
          <input v-model="petName" type="text" placeholder="输入宠物名字">
        </div>
        <div class="dialog-buttons">
          <button 
            class="adopt-button"
            :disabled="!petName"
            @click="adoptPet"
          >
            确认领养
          </button>
          <button 
            class="cancel-button"
            @click="showAdoptDialog = false"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';
import { petTypes, PetTypeConfig } from '@/config/petTypes';

export default defineComponent({
  name: 'PetShop',
  
  setup() {
    const store = useStore();
    const showAdoptDialog = ref(false);
    const selectedPet = ref<PetTypeConfig | null>(null);
    const petName = ref('');

    const selectPetType = (pet: PetTypeConfig) => {
      selectedPet.value = pet;
      showAdoptDialog.value = true;
      petName.value = '';
    };

    const adoptPet = async () => {
      if (!selectedPet.value || !petName.value) return;

      try {
        await store.dispatch('pet/adoptPet', {
          type: selectedPet.value.id,
          name: petName.value
        });
        
        showAdoptDialog.value = false;
        selectedPet.value = null;
        petName.value = '';
      } catch (error) {
        console.error('Failed to adopt pet:', error);
      }
    };

    return {
      petTypes,
      showAdoptDialog,
      selectedPet,
      petName,
      selectPetType,
      adoptPet
    };
  }
});
</script>

<style scoped>
.pet-shop {
  padding: 20px;
}

.pet-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.pet-type-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pet-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pet-icon {
  font-size: 48px;
}

.pet-info {
  flex: 1;
}

.pet-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.pet-info p {
  margin: 0 0 16px;
  color: #666;
}

.pet-stats {
  margin-bottom: 16px;
}

.stat {
  margin-bottom: 8px;
}

.stat span {
  font-size: 14px;
  color: #666;
}

.stat-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin-top: 4px;
}

.stat-fill {
  height: 100%;
  background: #4CAF50;
  border-radius: 3px;
  transition: width 0.3s;
}

.pet-skills {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.skill {
  font-size: 14px;
  color: #666;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.skill-bonus {
  color: #4CAF50;
  background: #E8F5E9;
}

.pet-price {
  font-size: 18px;
  font-weight: bold;
  color: #F57C00;
}

.adopt-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
}

.pet-preview {
  text-align: center;
  margin: 20px 0;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}

.input-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.dialog-buttons {
  display: flex;
  gap: 12px;
}

.adopt-button,
.cancel-button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.adopt-button {
  background: #4CAF50;
  color: white;
}

.adopt-button:hover {
  background: #43A047;
}

.adopt-button:disabled {
  background: #A5D6A7;
  cursor: not-allowed;
}

.cancel-button {
  background: #f5f5f5;
  color: #666;
}

.cancel-button:hover {
  background: #e0e0e0;
}
</style> 